<template>
  <el-dialog title="分配角色" v-dialogDrag :visible.sync="roleFormVisible">
    <el-form
      :model="formBase"
      label-position="left"
      label-width="120px"
      style="margin-left:120px; width:80%;"
    >
      <el-checkbox-group v-model="checkedRoles">
        <el-checkbox v-for="(item,index) in roles" :label="item.id" :key="index">{{item.name}}</el-checkbox>
      </el-checkbox-group>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="createData">提交</el-button>
      <el-button @click="roleFormVisible=false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import roleApi from "@/api/role";
import accountApi from "@/api/account";

export default {
  data() {
    return {
      roleFormVisible: false,
      formBase: {},
      checkedRoles: [],
      data: [],
      roles: [],
      id: null
    };
  },

  methods: {
    getRoles(id) {
      this.roleFormVisible = true;
      accountApi.findRole(id).then(resp1 => {
        this.checkedRoles = resp1.data.data.roleIds;
        console.log("checkedRole:", this.checkedRoles);
        roleApi.findAll().then(resp => {
          console.log("角色列表", resp.data);
          this.id = id;
          this.roles = resp.data;
          console.log(this.roles);
        });
      });
    },

    createData() {
      const pojo = {
        id: this.id,
        ids: this.checkedRoles
      };
      accountApi.assignRoles(pojo).then(resp => {
        if (resp.data.code == 0) {
          this.$message.success("分配权限成功");
        } else {
          this.$message.error("分配权限失败");
        }
        this.roleFormVisible = false;
      });
    }
  }
};
</script>